<!-- Page header -->
<div class="page-header d-print-none">
  <div class="container-xl">
    <div class="row g-2 align-items-center">
      <div class="col">
        <!-- Page pre-title -->
        <!-- <div class="page-pretitle">
          子标题
        </div> -->
        <h2 class="page-title" id="article_list_board_title">
          <!-- 如果是版块页面，那么文字替换成版块名 -->
          首页
        </h2>
        <!-- 帖子数量 -->
        <div class="text-muted mt-1" id="article_list_count_board"></div>
      </div>
      <!-- Page title actions -->
      <div class="col-auto ms-auto d-print-none">
        <div class="btn-list">
          <!-- 发新帖按钮 宽屏 -->
          <a href="javascript:void(0);" class="btn btn-primary d-none d-sm-inline-block article_post">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
              stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path d="M12 5l0 14" />
              <path d="M5 12l14 0" />
            </svg>
            发布帖子
          </a>
          <!-- 发新帖按钮 窄屏 -->
          <a href="javascript:void(0);" class="btn btn-primary d-sm-none btn-icon article_post" aria-label="发布帖子">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
              stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path d="M12 5l0 14" />
              <path d="M5 12l14 0" />
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Page body -->
<div class="page-body">
  <div class="container-xl">
    <div class="row justify-content-center">
      <!-- 显示列表的宽度 -->
      <div class="col-12">
        <div class="card">
          <div class="card-body">
            <div class="divide-y" id="artical-items-body">
              <!-- 动态生成帖子列表 -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 翻页 -->
    <div id="demo-laypage-all"></div>
    <!-- 正文 结束 -->
  </div>
  <script>

    $(function () {
      // ========================= 获取版块下帖子信息 =======================
      // 获取当前选中的版块
      let activeLiEl = $('#topBoardList>.active');
      // 构造query string
      let queryString = '';
      let boardData = activeLiEl.data('board');
      // 导航栏版块Item是否绑定版块数据
      if (boardData) {
        // 构造query string 
        queryString = '?boardId=' + boardData.id;
        // 获取版块信息
        getBoardInfo(boardData.id);
      } else {
        // 设置版块名称
        $('#article_list_board_title').html('首页');
        $('#article_list_count_board').hide();
      }

      // ========================= 获取版块信息 =======================
      function getBoardInfo(boardId) {
        if (!boardId) {
          return;
        }
        // 发送请求,成功后，显示版块相关信息
        $.ajax({
          type: 'get',
          // 没有参数，表示获取当前登录用户的信息
          url: '/article/getBoard?boardId=' + boardId,
          // 成功回调
          success: function (respData) {
            // 判断响应的状态码
            if (respData.code == 0) {
              $("#article_list_board_title").html(respData.data.name);
              $("#article_list_count_board").html("帖子数量为: " + respData.data.articleCount);
            } else {
              // 提示信息
              $.toast({
                heading: '警告',
                text: respData.message,
                icon: 'warning'
              });
            }
          },
          // 失败回调
          error: function (error) {
            if (error.status == 401) {
              location.href = "sign-in.html";
            }
            // 提示信息
            $.toast({
              heading: '错误',
              text: '访问出现问题，请与管理员联系.',
              icon: 'error'
            });
          }
        });
      }

   
      layui.use(function () {
        var laypage = layui.laypage;
      
        // 完整显示
        laypage.render({
          elem: 'demo-laypage-all', // 元素 id
          count: 100, // 数据总数，这里应该根据实际数据动态设置
          layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
          jump: function (obj) {
            // 当用户点击分页控件时，调用 fetchArticles 函数获取数据
            fetchArticles(obj.curr, obj.limit);
          }
        });
      });
        // 获取帖子列表的函数
      function fetchArticles(page, pageSize) {
          // 发送 AJAX 请求获取数据
          $.ajax({
            url: '/article/getList' + queryString,
            type: 'post',
            contentType: 'application/json', 
            data: JSON.stringify({ 
              page: page,
              pageSize: pageSize
            }),
            success: function (respData) {
              if (respData.code == 0) {
              
                listBuildArticleList(respData.data.items);
                // 更新分页组件的数据
                updateLayuiPagination(respData.data);
              } else {
                // 提示信息
                $.toast({
                  heading: '警告',
                  text: respData.message,
                  icon: 'warning'
                });
              }
            },
            // 失败回调
            error: function (error) {
              if (error.status == 401) {
                location.href = "sign-in.html";
              }
              // 提示信息
              $.toast({
                heading: '错误',
                text: '访问出现问题，请与管理员联系.',
                icon: 'error'
              });
            }
          });
        }
      function updateLayuiPagination(pagination) {
        var laypage = layui.laypage;
        laypage.render({
          elem: 'demo-laypage-all', // 确保这里的 elem 与初始化时使用的一致
          count: pagination.total, // 从服务器获取的总条目数
          curr: pagination.pages.page || 1, // 从服务器获取的当前页码，如果没有提供则默认为1
          limit: pagination.pages.pageSize || 10 // 从服务器获取的每页条目数，如果没有提供则默认为10
          ,jump(obj, first) {
            if(!first) {
              fetchArticles(obj.curr, obj.limit)
            }
          }
        });
      }

      // ========================= 构造帖子列表 =======================
      function listBuildArticleList(data) {
        if (data.length == 0) {
          $('#artical-items-body').html('还没有帖子');
          return;
        }
        // 默认头像路径
        let avatarUrl = 'image/avatar01.jpeg';

        $('#artical-items-body').html('')
        // 遍历结果
        data.forEach(article => {
          // 设置默认头像
          if (!article.user.avatarUrl) {
            article.user.avatarUrl = avatarUrl;
          }
          // 构造HTML
          let articleHtmlStr = '<div>'
            + ' <div class="row">'
            + ' <div class="col-auto">'
            + ' <span class="avatar" style="background-image: url(' + article.user.avatarUrl + ')"></span>'
            + ' </div>'
            + ' <div class="col">'
            + ' <div class="text-truncate">'
            + ' <a href="javascript:void(0);" class="article_list_a_title">'
            + ' <strong>' + article.title + '</strong>'
            + ' </a>'
            + ' </div>'
            + ' <div class="text-muted mt-2">'
            + ' <div class="row">'
            + ' <div class="col">'
            + ' <ul class="list-inline list-inline-dots mb-0">'
            + ' <li class="list-inline-item">'
            + ' <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user"'
            + ' width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"'
            + ' fill="none" stroke-linecap="round" stroke-linejoin="round">'
            + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
            + ' <path d="M12 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path>'
            + ' <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>'
            + ' </svg> '
            + article.user.nickname
            + ' </li>'
            + ' <li class="list-inline-item">'
            + ' <svg xmlns="http://www.w3.org/2000/svg"'
            + ' class="icon icon-tabler icon-tabler-clock-edit" width="24" height="24"'
            + ' viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"'
            + ' stroke-linecap="round" stroke-linejoin="round">'
            + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
            + ' <path d="M21 12a9 9 0 1 0 -9.972 8.948c.32 .034 .644 .052 .972 .052"></path>'
            + ' <path d="M12 7v5l2 2"></path>'
            + ' <path d="M18.42 15.61a2.1 2.1 0 0 1 2.97 2.97l-3.39 3.42h-3v-3l3.42 -3.39z">'
            + ' </path>'
            + ' </svg> '
            + article.createTime
            + ' </li>'
            + ' </ul>'
            + ' </div>'
            + ' <div class="col-auto d-none d-md-inline">'
            + ' <ul class="list-inline list-inline-dots mb-0">'
            + ' <li class="list-inline-item">'
            + ' <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-eye"'
            + ' width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"'
            + ' fill="none" stroke-linecap="round" stroke-linejoin="round">'
            + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
            + ' <path d="M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>'
            + ' <path'
            + ' d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7">'
            + ' </path>'
            + ' </svg> '
            + article.visitCount
            + ' </li>'
            + ' <li class="list-inline-item">'
            + ' <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart"'
            + ' width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"'
            + ' fill="none" stroke-linecap="round" stroke-linejoin="round">'
            + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
            + ' <path'
            + ' d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572">'
            + ' </path>'
            + ' </svg> '
            + article.likeCount
            + ' </li>'
            + ' <li class="list-inline-item">'
            + ' <svg xmlns="http://www.w3.org/2000/svg"'
            + ' class="icon icon-tabler icon-tabler-message-circle" width="24" height="24"'
            + ' viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"'
            + ' stroke-linecap="round" stroke-linejoin="round">'
            + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
            + ' <path d="M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1"></path>'
            + ' <path d="M12 12l0 .01"></path>'
            + ' <path d="M8 12l0 .01"></path>'
            + ' <path d="M16 12l0 .01"></path>'
            + ' </svg> '
            + article.replyCount
            + ' </li>'
            + ' </ul>'
            + ' </div>'
            + ' </div>'
            + ' </div>'
            + ' </div>'
            + ' </div>'
            + ' </div>';
          // 转为元素对象
          let articleItem = $(articleHtmlStr);
          // 获取标题的 a 标签
          let articleTitle = articleItem.find('.article_list_a_title');
          // 处理标题点击事件
          articleTitle.click(function () {
            // 通过全局变量保存当前访问的帖子信息
            currentArticle = article;
            removeNavActive();
            $('#bit-forum-content').load('details.html');
          });
          // 添加到列表
          $('#artical-items-body').append(articleItem);
        });
      }

      // ================== 处理发贴事件 =====================
      $('.article_post').click(function () {
        removeNavActive();
        $('#bit-forum-content').load('article.html');
      });
      // // 初始化 Layui 分页组件
      // layui.use(['laypage'], function () {
      //   var laypage = layui.laypage;
      //   // 假设您已经有了总帖子数 count
      //   var count = 100; // 这里的 count 应该是从服务器获取的总记录数
      //   var curr = 1; // 当前页码
      //   var limit = 10; // 每页显示的帖子数
      //   // 执行分页渲染
      //   laypage.render({
      //     elem: 'demo-laypage-normal', // 分页容器的ID
      //     count: count, // 数据总数
      //     curr: curr,
      //     limit: limit,
      //     limits: [5, 10, 15], // 每页条数的选择项
      //     jump: function (obj) { // 翻页触发的回调
      //       curr = obj.curr; // 更新当前页码
      //       limit = obj.limit; // 更新每页显示的条数
      //       // 根据当前页码和每页显示条数重新获取帖子列表
      //       fetchArticles(curr, limit);
      //     }
      //   });
      // });
    });
  </script>